.copy-content {
  font-size: 1.125rem;

  @include media("<phone") {
    font-size: $fs-m;
  }

  hr {
    border: 0;
    border-top: 2px dashed primary-color(500, 0.25);
    margin: $sp-l 0;
  }

  h2,
  h3,
  h4,
  h5 {
    margin-bottom: 0.5em;
    font-weight: 650;

    &:not(:first-child) {
      margin-top: 1.5em;
    }
  }

  h2 {
    font-size: 1.25rem;
  }

  h3 {
    font-size: 1.125rem;
  }

  p,
  pre[class*="language-"],
  .note {
    &:not(:last-child) {
      margin-bottom: 1.25rem;
    }
  }

  strong {
    font-weight: 640;
  }

  code:not([class*="language-"]) {
    color: desaturate(darken(#f92672, 12%), 8%);
    font-family: $font-stack-mono;
    font-size: inherit;
    font-weight: bold;
    background-color: transparentize(darken(#f92672, 10%), 0.95);
    padding: 0.125em 0.25em;
    border-radius: $br-s;
    transition: 0.2s ease-in-out;
    transition-property: background-color, color;

    @include dark-mode {
      color: #f92672;
      background-color: transparentize(lighten(#f92672, 10%), 0.9);
    }
  }

  pre[class*="language-"] {
    position: relative;
    background: primary-color(900);
    padding: 0;
    border-radius: $br-l;
    margin: 0 (-$sp-xxs);
    font-size: inherit;
    overflow: initial;

    &::before {
      position: absolute;
      right: 0;
      top: 0;
      height: 1.25rem;
      display: flex;
      align-items: center;
      background-color: primary-color(600);
      color: white;
      font-size: $fs-xs;
      font-weight: 600;
      padding: 0 $sp-xxs;
      border-top-right-radius: $br-m;
      border-bottom-left-radius: $br-m;
      user-select: none;
    }

    code {
      display: block;
      padding: $sp-s;
      overflow: auto;
    }
  }

  pre[class*="language-html"]::before {
    content: "HTML";
  }

  pre[class*="language-css"]::before {
    content: "CSS";
  }

  pre[class*="language-scss"]::before {
    content: "SCSS";
  }

  pre[class*="language-js"]::before {
    content: "JS";
  }

  pre[class*="language-jsx"]::before {
    content: "JSX";
  }

  pre[class*="language-bash"]::before {
    content: "Bash";
  }

  .code-label {
    display: inline-block;
    padding: $sp-xxxs $sp-xxs;
    margin-left: -$sp-xxs;
    background-color: primary-color(600);
    color: primary-color(100);
    font-size: $fs-s;
    font-weight: 650;
    border-top-left-radius: $br-l;
    border-top-right-radius: $br-l;
  }

  .code-label + pre[class*="language-"] {
    margin-top: 0;
    border-top-left-radius: 0;
  }

  table, .table-wrap {
    &:not(:last-child) {
      margin-bottom: 1.25rem;
    }
  }

  .table-wrap {
    overflow-x: auto;
  }

  table {
    border-collapse: collapse;
    min-width: 100%;

    thead {
      color: primary-color(800);

      @include dark-mode {
        color: primary-color(200);
      }
    }

    th,
    td {
      text-align: left;
      padding: $sp-xxs $sp-m;
    }

    th {
      color: primary-color(800);
			font-weight: 600;
			font-size: $fs-s;
      white-space: nowrap;
      
      @include dark-mode {
        color: primary-color(200);
      }
    }

    td {
      color: primary-color(700);
      line-height: 1.5rem;

      @include dark-mode {
        color: primary-color(300);
      }
    }

    tbody {
      th {
        padding-left: $sp-xs;
      }

      tr {
        &:nth-child(odd) {
          background-color: primary-color(700, 0.05);

          @include dark-mode {
            background-color: primary-color(600, 0.05);
          }
        }
      }
    }
  }

  .variables-table {
    font-size: $fs-m;

    td {
      font-family: $font-stack-mono;
      white-space: nowrap;
    }
  }

  .properties-table {
    font-size: $fs-m;

    th {
      width: 10ch;
    }

    td {
      font-family: $font-stack-mono;
    }
  }

  a {
    font-weight: 600;
    text-decoration: none;
    position: relative;
    white-space: nowrap;

    &:hover,
    &:focus {
      outline: none;
    }
  }

  a:not([href*="tab=examples"]) {
    color: primary-color(700);
    transition: color 0.2s $ease-out;

    @include dark-mode {
      color: primary-color(300);
    }

    &::before {
      --anchor-underline-color: #{$cyan};
      content: "";
      position: absolute;
      top: calc(100% + 0.15em);
      left: 0.2em;
      right: 0.2em;
      height: 0.15em;
      opacity: 0.65;
      background-color: var(--anchor-underline-color);
      transition: 0.15s $ease-out;
      transition-property: height, left, right, opacity;
    }

    &:hover,
    &:focus {
      color: primary-color(800);

      @include dark-mode {
        color: primary-color(100);
      }

      &::before {
        left: -0.1em;
        right: -0.1em;
        height: 0.2em;
        opacity: 1;
      }
    }
  }

  a[target="_blank"] {
    position: relative;
    
    &::before {
      --anchor-underline-color: #{$green};
    }

    &::after {
      content: attr(href);
      background-color: primary-color(800);
      color: primary-color(50);
      padding: $sp-xxxs $sp-xxs;
      border-radius: $br-m;
      position: absolute;
      top: 100%;
      left: 50%;
      max-width: max(100%, 40ch);
      transform: translateX(-50%);
      font-size: $fs-xs;
      z-index: 1;
      opacity: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      visibility: hidden;
      transition: transform 0.2s ease-out, opacity 0.2s ease-out;

      @include media("<laptop") {
        display: none;
      }
    }

    &:hover,
    &:focus {
      &::after {
        transform: translateX(-50%) translateY(#{$sp-xxs});
        opacity: 1;
        visibility: visible;
      }
    }
  }

  a[href*="tab=examples"] {
    align-items: center;
    line-height: 1.5rem;
    display: inline-flex;
    color: primary-color(700);
    background-color: primary-color(100);
    font-size: $fs-m;
    font-family: $font-stack-mono;
    white-space: initial;
    padding: 0 $sp-xxs;
    border-radius: $br-m;
    margin-right: $sp-xxxs;
    margin-bottom: $sp-xxs;
    transition: 0.2s $ease-out;
    transition-property: background-color, color, box-shadow;

    @include dark-mode {
      background-color: primary-color(800);
      color: primary-color(100);
    }

    &::after {
      display: inline-block;
      content: "→";
      font-size: $fs-l;
      margin-left: $sp-xxs;
      transition: transform 0.2s $ease-out-back;
    }

    &:focus {
      box-shadow: 0 0 0 2px $cyan;
      outline: none;
    }

    &:hover {
      background-color: primary-color(300);
      color: primary-color(800);

      &::after {
        transform: translateX(0.75rem);
      }

      @include dark-mode {
        background-color: primary-color(700);
        color: primary-color(50);
      }
    }

    &:active {
      background-color: primary-color(600);
      color: primary-color(50);
      box-shadow: none;
    }

    &.link--large {
      padding: $sp-xxxs $sp-xxs;
    }
  }
}

.note {
  position: relative;
  background-color: primary-color(600, 0.05);
  border-left: 8px solid primary-color(500);
  padding: $sp-s;
  border-radius: $br-m;
  font-size: $fs-m;

  pre[class*="language-"] {
    margin: 0;
  }

  @include dark-mode {
    background-color: primary-color(500, 0.1);
  }
}

.note--tagged {
  margin-top: 1.75rem;
}

.note-tag__wrap {
  position: absolute;
  top: -0.5rem;
  right: 1rem;
  display: flex;
}

.note-tag {
  height: 1.25rem;
  display: flex;
  align-items: center;
  background-color: primary-color(600);
  color: white;
  font-size: $fs-xs;
  font-weight: 600;
  padding: 0 $sp-xxs;
  border-radius: $br-m;
  user-select: none;

  & + & {
    margin-left: $sp-xxs;
  }
}

.note--Vue {
  border-color: $color-vue;
}

.note-tag--Vue {
  background-color: $color-vue;
}

.note--React {
  border-color: $color-react;
}

.note-tag--React {
  color: #282c34;
  background-color: $color-react;
}

.note--Sass {
  border-color: $color-sass;
}

.note-tag--Sass {
  background-color: $color-sass;
}

.note--Warning {
  border-color: $red;
}

.note-tag--Warning {
  background-color: $red;
}
